
<template>
  <el-dialog :title="title" :width="width" :visible.sync="isShowDialog" :close-on-click-modal="false" :append-to-body="true" :modal-append-to-body="true">
    <div class="page">
      <div class="nav-tree" v-if="$store.getters.datagrid[pageName].navTree">
        <el-tree :ref="'navTree'"  
          @node-expand="(e)=>navTreeNodeExpand(pageName,e)"
          @node-collapse="e=>navTreeNodeCollapse(pageName,e)" 
          :default-expanded-keys="navTreeExpandedList[pageName]" 
          :expand-on-click-node="false" 
          :props="{label:$store.getters.datagrid[pageName].navTree.labelField ? $store.getters.datagrid[pageName].navTree.labelField : $system.labelField}" :data="navTreeData" @node-click="(e)=>tapNavTree(pageName,e)" :highlight-current="true" :default-expand-all="false" :node-key="$store.getters.datagrid[pageName].navTree.valueField ? $store.getters.datagrid[pageName].navTree.valueField : $system.valueField"></el-tree>
      </div>
      <datagrid
        :ref="pageName"
        @close="closePicker"
        @pick="pickData"
        :isPicker="true"
        :isMultiplePicker="multiple" 
        :gridField="$store.getters.datagrid[pageName].gridField"
        :gridFieldSub="$store.getters.datagrid[pageName].gridFieldSub"
        :gridDo="$store.getters.datagrid[pageName].gridDo" 
        :gridTool="$store.getters.datagrid[pageName].gridTool" 
        :formSize="$store.getters.datagrid[pageName].formSize"
        :controller="$store.getters.datagrid[pageName].controller"
        :customize="$store.getters.datagrid[pageName].customize"
        :resource="$store.getters.datagrid[pageName].resource"
        :navTree="$store.getters.datagrid[pageName].navTree"
        :getPageAction="$store.getters.datagrid[pageName].getPageAction"
        :getEditActionProp="$store.getters.datagrid[pageName].getEditActionProp" 
        :editActionProp="$store.getters.datagrid[pageName].editActionProp"
        :gridName="pageName"></datagrid>
    </div>
    <!--
    <el-table ref="table" :border="true" :data="tableData"  class="datagrid-table"  :height="height" v-loading="tableLoading">
      <el-table-column type="selection" width="55" :selectable="selectable" fixed="left"></el-table-column>
      <el-table-column type="index" width="50" label="序号" fixed="left"></el-table-column>
      <el-table-column v-for="item in tableField" :key="item.field" :sortable="item.sortable ? item.sortable :false" :prop="item.field" :fixed="item.fixed ? item.fixed : false" :label="item.tableLabel ? item.tableLabel : item.label" :width="item.width" :min-width="item.minWidth" :formatter="item.formatter">
        <template slot-scope="scope">
          <template v-if="item.tableType == 'tagIds'">
            <el-tag class="datagrid-table-tags" v-for="tag in scope.row[item.field + '_arr']" :key="tag.value" disable-transitions>{{tag.label}}</el-tag>
          </template>
          <template v-if="item.tableType == 'tags'">
            <el-tag class="datagrid-table-tags" v-for="tag in scope.row[item.field]" :key="tag" disable-transitions>{{tag}}</el-tag>
          </template>
          <div v-if="item.tableType == 'tagcolor'" class="tagcolor">
            <div class="tagcolor-value" v-for="tagcolorItem in scope.row[item.field+'_arr']" :key="tagcolorItem.value" :style="{color:tagcolorItem.color_text? tagcolorItem.color_text:'#409eff',background:tagcolorItem.color_bg ? tagcolorItem.color_bg:'#ecf5ff','border-color':tagcolorItem.color_border ? tagcolorItem.color_border:'#d9ecff'}">{{tagcolorItem['label']}}</div>
          </div>
          <template v-if="item.tableType == 'object'">{{item.tableObject[scope.row[ item.tableAlias ? item.tableAlias : item.field]]}}</template>
          <template v-if="item.tableType == 'cover'">
            <el-image class="datagrid-table-cover" :preview-src-list="[scope.row[item.tableAlias ? item.tableAlias : item.field]]" fit="cover" :src="scope.row[item.tableAlias ? item.tableAlias : item.field]"></el-image>
          </template>
          <template v-if="!item.tableType">{{scope.row[item.tableAlias ? item.tableAlias : item.field]}}</template>
        </template>
      </el-table-column>
    </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit">取 回</el-button>
      </div>
      -->
  </el-dialog>
</template>
<style scoped>
.page{display: flex;width:100%;}
.nav-tree{background:#fff;width:200px;flex:0 0 200px;border-radius: 5px;margin-right:20px;box-sizing: border-box;padding:20px;}
</style>
<script>
  import { getPage} from '@/api/common';
  import Datagrid from 'common/datagrid';
  export default {
    name:'dialogDataPicker',
    components:{
      Datagrid
    },
    props:{
      title:{
        type:String,
        default(){
          return '';
        }
      },
      width:{
        type:String,
        default(){
          return '1200px'
        }
      },
      height:{
        type:String,
        default(){
          return '400px';
        }
      },
      pageName:{
        type:String,
        default(){
          return '';
        }
      },
      multiple:{
        type:Boolean,
        default(){
          return false;
        }
      }
    },
    data() {
      return {
        isShowDialog:false,
        tableData:[],
        tableLoading:false,
        selectable:true,
        tableField:[],
        
        navTreeData:[],
        currentNavTreeNode:{},
        navTreeExpandedList:{}
      };
    },
    mounted(){
   
    },
    created(){
      if (!this.$store.getters.datagrid[this.pageName]) throw Error('datagrid不存在'+this.pageName+'页面参数');
      if (this.$store.getters.datagrid[this.pageName].navTree){
        this.navTreeExpandedList[this.pageName] = [];
        this.getNavTree(this.$store.getters.datagrid[this.pageName].navTree,this.pageName)
      }
    },
    methods:{
      open(){
        this.isShowDialog = true;
        this.$nextTick(()=>{
          this.$refs[this.pageName].resetSearch();
        })
      },
      close(){
        this.isShowDialog = false;
      },
      closePicker(){
        this.close();
      },
      pickData(data){
        this.$emit('pickData',data);
        this.close();
      },
      navTreeNodeExpand(datagridName,data) {
        let valueField = this.$store.getters.datagrid[datagridName].navTree.valueField ? this.$store.getters.datagrid[datagridName].navTree.valueField : this.$system.valueField;
        this.navTreeExpandedList[datagridName].push(data[valueField]);
      },
      navTreeNodeCollapse(datagridName,data) {
        let valueField = this.$store.getters.datagrid[datagridName].navTree.valueField ? this.$store.getters.datagrid[datagridName].navTree.valueField : this.$system.valueField;
        this.navTreeExpandedList[datagridName].splice(this.navTreeExpandedList[datagridName].indexOf(data[valueField]), 1); 
      },
      getNavTree(navTree,datagridName){
        this.$request({
          c:navTree.controller,
          method:this.$system.requestMethodTreeData,
          data:{},
          reject:true
        }).then(data=>{
          let valueField = navTree.valueField ? navTree.valueField : this.$system.valueField;
          if(navTree.showAllText) {
            let obj = {};
            obj[navTree.labelField ? navTree.labelField : this.$system.labelField] = navTree.showAllText;
            obj[valueField] = 0;
            obj.children = data;
            this.navTreeData = [obj];
            this.navTreeExpandedList[datagridName].push(0);
          } else {
            this.navTreeData = data;
          }
        });  
      },
      tapNavTree(datagridName,e){
        let query = {};
        let datagridRef = this.$refs[datagridName];
        let navTree =  this.$store.getters.datagrid[datagridName].navTree;
        let valueField = navTree.valueField ? navTree.valueField : this.$system.valueField;
        if (this.currentNavTreeNode[datagridName] == e[valueField]) return;
        this.currentNavTreeNode[datagridName] = e[valueField];
        navTree.query.forEach(queryItem => {
          query[queryItem[0]] = e[queryItem[1]] ? e[queryItem[1]] : '';
          if (queryItem.length == 3) {
            query[queryItem[0]] = query[queryItem[0]] ? query[queryItem[0]] : queryItem[2]
          }
        });
        datagridRef.setQuery(query);
      },
      submit(){}
    }
  };
</script>
